.btn{
	width: 152rpx;
	height: 56rpx;
	background: #FFFFFF;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	text-align: center;
	line-height: 56rpx;
	font-weight: 400;
	font-size: 28rpx;
	color: #2AB4F5;
}
.controller {
	position: relative;
	.today-btn {
		position: absolute;
		right: 40rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 24rpx;
	}
	.action {
		width: 276rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 24rpx;
		.date {
			width: 192rpx;
			font-size: 34rpx;
			color: #FFFFFF;
			text-align: center;
		}
		.arrow {
			// width: 100rpx;
			height: 40rpx;
			text-align: center;
			&.disabled {
				opacity: 0.5;
			}
			&.right {
				transform: rotate(180deg);
			}
			.icon {
				width: 32rpx;
				height: 32rpx;
				margin: 0 auto;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				z-index: 99;
				&::after {
					content: '';
					height: 16rpx;
					width: 16rpx;
					top: 12rpx;
					border-width: 0 0 2rpx 2rpx;
					border-color: #fff;
					border-style: solid;
					transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
					position: absolute;
					z-index: 99;
				}
			}
		}
	}
}

.calender {
	// height: 622rpx;
	overflow: hidden;
	transition: height 0.2s ease;
	&.month {
		// height: 622rpx;
	}
	&.week {
		height: 150rpx;
	}
	.week-box {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		z-index: 99;
		.week {
			width: 70rpx;
			color: #FFFFFF;
			text-align: center;
			margin: 0 auto;
			font-size: 28rpx;
			z-index: 99;
		}
	}

	.day-box {
		margin-top: 20rpx;
		position: relative;
	}

	.days,
	.placeholder {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		row-gap: 16rpx;
		font-weight: bold;

		.item {
			width: 62rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			background: #f3f3f3;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			transition: all 0.2s ease;
			margin: 0 auto;
		font-size: 28rpx;
			position: relative;

			&.in {
				background: #f2f2ff;
			}

			&.after,
			&.before,
			&.prev,
			&.next {
				background: transparent !important;
				color: #d2d2d2 !important;
			}

			&.active {
				background: var(--active-bg) !important;
				color: var(--active) !important;
				transition: all 0.1s ease;
			}
			.dots {
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				background: #fff;
				position: absolute;
				left: 50%;
				bottom: 0rpx;
				transform: translateX(-50%);
			}
			.dotsicon{
				width: 15rpx;
				height: 15rpx;
				border-radius: 50%;
				position: absolute;
				left: 50%;
				bottom: 0rpx;
				transform: translateX(-50%);
			}
		}
	}

	.days {
		opacity: 1;
		transform: translateX(0);
		position: relative;
		z-index: 3;

		&.prev,
		&.next {
			animation: switch 0.3s ease forwards;
			animation-delay: 0.1s;
		}

		&.prev {
			transform: translateX(-100vw);
		}

		&.next {
			transform: translateX(100vw);
		}
	}

	.placeholder {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 1;
		opacity: 0;

		&.prev,
		&.next {
			animation: opacity0 0.3s ease forwards;
		}
	}
}

.view-change-btn {
	text-align: center;
	color: #fff;
	font-size: 26rpx;
	// padding: 20rpx;
	position: relative;
	margin-bottom: 12rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	image{
		width: 28rpx;
		height: 28rpx;
		margin-left: 8rpx;
	}
	// &::before,
	// &::after {
	// 	content: '';
	// 	width: 260rpx;
	// 	height: 1px;
	// 	background: #f7f8f9;
	// 	position: absolute;
	// 	top: 50%;
	// 	z-index: 1;
	// }

	// &::before {
	// 	left: 50rpx;
	// }

	// &::after {
	// 	right: 50rpx;
	// }
}

@keyframes switch {
	0% {
		opacity: 0;
	}

	40% {
		opacity: 0;
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes opacity0 {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}
